<template>
  <div class="alert-dialog ">
    <div
      class="alert-detail-container"
      :class="
        initAlertDetail.equipmentType == '监控设备' ? 'videodialog' : 'guangbo'
      "
    >
      <div class="alertDetail">
        <div
          class="alertDetailTab"
          v-if="initAlertDetail.equipmentType == '监控设备'"
        >
          <div class="alert-linkage"></div>
        </div>
        <div
          class="detail-right"
          :style="initAlertDetail.equipmentType == '监控设备' ? '' : 'flex:1'"
        >
          <div class="alert-message">
            <div class="alert-message-box">
              <div class="alert-message-details">
                <div class="alert-detail-time">
                  <span :style="alertColor(initAlertDetail.alertGrade)">{{
                    alertLv(initAlertDetail.alertGrade)
                  }}</span
                  >告警时间：
                  {{
                    typeof initAlertDetail.timeOfDuration == "string"
                      ? initAlertDetail.timeOfDuration
                      : secTotime(initAlertDetail.timeOfDuration)
                  }}
                </div>
                <div class="alertLocation">
                  {{ initAlertDetail.alertContent }}
                </div>
                <div class="alert-detail-ename">
                  设备名称： {{ initAlertDetail.equipmentName }}
                </div>
                <div class="alert-detail-location">
                  设备位置： {{ initAlertDetail.equipmentLocation }}
                </div>
                <div class="showVide" v-if="alertImageUrl">
                  <el-button
                    style="border: 1px solid rgba(38, 190, 255, 1);color: rgba(38, 190, 255, 1);background-color: rgba(6, 30, 41, 0.85);"
                    @click="getVideo"
                  >
                    {{ !showVideo ? "获取视频流" : "关闭视频流" }}
                  </el-button>
                </div>
              </div>
              <div
                class="alert-message-image"
                v-if="alertImageUrl"
                v-loading="loading"
              >
                <img :src="alertImageUrl" alt="" @click="visible = true" />
                <div class="alert-video" v-if="showVideo && alertImageUrl">
                  <VideoPlayer
                    v-if="urlSrc"
                    :showDetail="false"
                    :type="1"
                    ref="videoPlayerRef"
                    :src="urlSrc"
                    :status="isPlay"
                  />
                </div>
              </div>
            </div>

            <!-- 处理 -->
            <div
              class="handle-status-input"
              v-if="initAlertDetail.handleStatus == '0'"
            >
              <div class="handleStatus">
                <span style="color: #EC3C32 ;margin-right: 3px;">*</span
                >处理结果：
                <div class="status">
                  <div class="statusItem" v-for="(item, index) in handleStatus">
                    <svg-icon
                      :icon="index == alertStatus ? '未处理' : '已处理'"
                      @click="changeHandleStatus(index)"
                      style="cursor: pointer;"
                    ></svg-icon>
                    {{ item.hstatusName }}
                  </div>
                </div>
              </div>
              <div class="handleMessage">
                描述：<textarea
                  v-model="handleMessage"
                  class="textarea"
                ></textarea>
              </div>
            </div>
            <div class="handle-status-input" v-else>
              <div class="handleStatus">
                <div class="handleText">
                  处理结果：
                </div>
                <div class="status">
                  已处理
                </div>
              </div>
              <div class="handleStatus">
                <div class="handleText">
                  处理人：
                </div>

                <div class="status">
                  {{ handleInfo.createName }}
                </div>
              </div>
              <div class="handleStatus">
                <div class="handleText">
                  处理时间：
                </div>
                <div class="status">
                  {{ handleInfo.handleTime }}
                </div>
              </div>
              <div class="handleMessage" style="margin-left: 0;margin-top: 0;">
                <div class="handleText">
                  描述：
                </div>
                <div class="status">
                  {{ handleInfo.description }}
                </div>
                <!-- <textarea
                  v-model="handleInfo.description"
                  class="textarea"
                  disabled
                ></textarea> -->
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 查看 -->
      <div class="alertHandle">
        <div class="handle">
          <div
            class="handle-btn-group"
            v-if="initAlertDetail.handleStatus == '0'"
          >
            <cdButton
              color="rgba(14, 72, 97, 1)"
              title="取消"
              @click="closeDialog()"
              textColor="rgba(38, 190, 255, 1)"
            >
            </cdButton>
            <cdButton
              color="rgba(38, 190, 255, 1)"
              title="确认"
              @click="handelAlert"
              textColor="rgba(255, 255, 255, 1)"
            ></cdButton>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 增加用于显示预览图片 -->
  <ImgPreview v-model="visible" :imgs="[alertImageUrl]" />
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUpdated, nextTick } from "vue";
import { secTotime } from "@/utils/tool";
import { ElMessage } from "element-plus";
import {
  handleAlert,
  getAlertImageUrl,
  handleAlertMessage,
  handleAlertMessageDetail,
} from "@/api/alert";
import { useMessageStore } from "@/stores/message";
import { useAlertDetailStore } from "@/stores/alertDeail";
import emits from "@/utils/emits";
import "vue-photo-preview/dist/skin.css";
const visible = ref(false);
import { useLoader } from "@/stores/loader";
import { getRtsp } from "@/api/screen/equipment";
const props = defineProps({
  closeFn: {
    default: Function,
  },
});
const { updateLoading } = useLoader();

const messageStore = useMessageStore();
// 用isPlay来控制切换告警时销毁视频流
const alertDetailStore = useAlertDetailStore();
const loading = ref(true);
const handleStatus = [
  { hstatusName: "未处理", num: 0 },
  { hstatusName: "已处理", num: 1 },
];
const initAlertDetail: any = computed(() => {
  return alertDetailStore.$state.message;
});
const alertStatus = ref(-1);
const alertImageUrl = ref();
const alertColor: any = (lv: any) => {
  switch (lv) {
    case "ERROR":
      return "color:rgba(224, 73, 40, 1);background-color:rgba(224, 73, 40, 0.20);border: 1px solid rgba(224, 73, 40, 1);";
    case "WARN":
      return "color:rgba(255, 230, 101, 1);background-color:rgba(255, 230, 101, 0.20);border: 1px solid rgba(255, 230, 101, 1);";
    case "INFO":
      return "color:rgba(107, 228, 255, 1);background: rgba(107, 228, 255, 0.20);border: 1px solid rgba(107, 228, 255, 1);";
  }
};
const alertLv: any = (lv: any) => {
  switch (lv) {
    case "ERROR":
      return "紧急";
    case "WARN":
      return "告警";
    case "INFO":
      return "一般";
  }
};
const showVideo = ref(false);
const urlSrc = ref("");
const isPlay = ref(false);
const getVideo = async () => {
  if (showVideo.value) {
    urlSrc.value = "";
    isPlay.value = false;
    showVideo.value = false;
  } else {
    urlSrc.value = (await getRtsp(initAlertDetail.value.equipmentId)).data;
    isPlay.value = true;
    showVideo.value = true;
  }
};
// 加载弹窗后获取告警图片
const getAlertImage = async () => {
  loading.value = true;
  if (initAlertDetail.value.imageUrl) {
    alertImageUrl.value = initAlertDetail.value.imageUrl;
      loading.value = false;
    return;
  }
  const res = await getAlertImageUrl({
    messageId: initAlertDetail.value.alertMessageId,
    order: "",
    orderType: "",
    pageNum: 1,
    pageSize: 10,
  });
  alertImageUrl.value = res.data.records[0].imageUrl || "";
  loading.value = false;
};
const changeHandleStatus = (index: any) => {
  alertStatus.value = index;
};
const handleMessage = ref("");
const timer = ref();
const closeDialog = () => {
  props.closeFn();
};
// 告警处理接口
const handelAlert = async () => {
  if (alertStatus.value == -1) {
    ElMessage.warning("请填写必选项");
    return;
  }
  if (alertStatus.value == 0) {
    ElMessage.success("处理成功");
    alertDetailStore.SetShow(false);
    return;
  }
  if (
    initAlertDetail.value.alertType &&
    initAlertDetail.value.alertType == "detail"
  ) {
    handleAlertMessage({
      description: handleMessage.value,
      handleStatus: alertStatus.value,
      messageId: initAlertDetail.value.alertMessageId,
      detailIds: [initAlertDetail.value.id],
    })
      .then((res: any) => {
        if (res.code == 200) {
          ElMessage.success("处理成功");
          alertDetailStore.SetShow(false);
          updateLoading(true);

          emits.emit("Handle_Detail");
        }
        if (
          initAlertDetail.value.equipmentLocationCode &&
          initAlertDetail.value.equipmentLocationCode != "ALL"
        ) {
          let data = {
            twinID: initAlertDetail.value.equipmentLocationCode,
            severity: checkLv(initAlertDetail.value.alertGrade),
            status: 0,
            sourceAlertKey: initAlertDetail.value.equipmentType,
            summary: initAlertDetail.value.alertContent,
            sourceIdentifier: initAlertDetail.value.alertMessageId,
            lastOccurrence:
              initAlertDetail.value.firstAlertTime ||
              initAlertDetail.value.latestAlertTime,
          };
          // messageStore.removeMessageAction(
          //   (<any>alertDetailStore.$state).message.alertMessageId
          // );
        }
      })
      .finally(() => {
        props.closeFn();
      });
  } else {
    handleAlert({
      description: handleMessage.value,
      handleStatus: alertStatus.value,
      messageId: initAlertDetail.value.alertMessageId,
    })
      .then((res: any) => {
        if (res.code == 200) {
          ElMessage.success("处理成功");
          alertDetailStore.SetShow(false);
          updateLoading(true);

          timer.value = setTimeout(() => {
            emits.emit("ALERT-DIALOG");
          }, 2000);
        }
        if (
          initAlertDetail.value.equipmentLocationCode &&
          initAlertDetail.value.equipmentLocationCode != "ALL"
        ) {
          let data = {
            twinID: initAlertDetail.value.equipmentLocationCode,
            severity: checkLv(initAlertDetail.value.alertGrade),
            status: 0,
            sourceAlertKey: initAlertDetail.value.equipmentType,
            summary: initAlertDetail.value.alertContent,
            sourceIdentifier: initAlertDetail.value.alertMessageId,
            lastOccurrence:
              initAlertDetail.value.firstAlertTime ||
              initAlertDetail.value.latestAlertTime,
          };
          messageStore.removeMessageAction(
            (<any>alertDetailStore.$state).message.alertMessageId
          );
        }
      })
      .finally(() => {
        props.closeFn();
      });
  }
};
const checkLv = (lv: any) => {
  switch (lv) {
    case "WARN":
      return 1;
    case "ERROR":
      return 2;
    case "INFO":
      return 3;
  }
};
const handleInfo = ref([]);
onMounted(async () => {
  if (initAlertDetail.value.handleStatus != "0") {
    const res: any = await handleAlertMessageDetail({
      messageId: initAlertDetail.value.alertMessageId,
      order: "",
      orderType: "",
      pageNum: 1,
      pageSize: 1000,
    });

    handleInfo.value = res.data.records[0];
    console.log(handleInfo.value);
  }
  nextTick(() => {
    getAlertImage();
  });
});
onUpdated(() => {
  // getAlertImage();
});
</script>

<style scoped lang="scss">
.videodialog {
  width: 100%;
  // height: clamp(26.313rem, 21.93vw, 52.625rem) !important;
}

.alert-detail-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: var(--height);
  font-size: clamp(0.75rem, 0.63vw, 1.5rem);

  .alertDetail {
    display: flex;
    flex: 0.9;

    .detail-right {
      flex: 1;
      width: 100%;
      height: 100%;
      margin-left: 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .alert-message {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .alert-message-box {
          flex: 0.45;
          padding: 16px;
          box-sizing: border-box;
          display: flex;

          .alert-message-details {
            flex: 0.5;

            .alert-detail-time {
              span {
                padding: clamp(0.313rem, 0.26vw, 0.625rem)
                  clamp(0.75rem, 0.63vw, 1.5rem);
                margin-right: clamp(0.375rem, 0.31vw, 0.75rem);
                font-weight: bold;
              }
            }

            .alertLocation {
              font-size: clamp(1rem, 0.83vw, 2rem);
            }

            & > div {
              color: rgba(255, 255, 255, 1);
              margin-bottom: 16px;
            }

            .alert-detail-lv {
            }
          }

          .alert-message-image {
            flex: 0.5;
            display: flex;
            justify-content: right;

            img {
              width: clamp(16.063rem, 13.39vw, 32.125rem);
              height: clamp(11.875rem, 9.9vw, 23.75rem);
            }
            .alert-video {
              width: clamp(21.875rem, 18.23vw, 43.75rem);
              height: clamp(11.875rem, 9.9vw, 23.75rem);
            }
          }
        }

        .handle-status-input {
          display: flex;
          flex: 0.55;
          flex-direction: column;
          padding: 16px;
          box-sizing: border-box;
          width: 100%;
          height: 100%;
          color: #ffffff;

          .handleStatus {
            display: flex;
            align-items: center;
            flex: 0.3;

            .status {
              display: flex;

              .statusItem {
                margin-right: 30px;

                &:first-child {
                  margin-left: 5px;
                }
              }
            }
          }

          .handleMessage {
            margin-top: clamp(1.25rem, 1.04vw, 2.5rem);
            margin-left: 10px;
            display: flex;
            flex: 0.7;

            textarea {
              padding: clamp(0.625rem, 0.52vw, 1.25rem);

              border: 1px solid #818181;
              box-sizing: border-box;
              width: 90%;
              background-color: rgba(6, 16, 24, 0.68);
              color: #ffffff;
              height: clamp(4.375rem, 3.65vw, 8.75rem);
              resize: none;
            }
          }
        }
      }
    }
  }
  .handleText {
    width: clamp(4.375rem, 3.65vw, 8.75rem);
  }
  .alertHandle {
    flex: 0.1;
    display: flex;

    .handle {
      width: 100%;
      display: flex;
      margin-top: 48px;
      justify-content: right;

      .paging {
        display: flex;

        & > div {
          margin-right: 10px;
        }

        .page {
          display: flex;
          align-items: center;
          flex: 0.4;
          justify-content: center;
        }
      }

      .handleOption {
        flex: 0.55;
      }

      .handle-btn-group {
        display: flex;
        justify-content: right;
        color: #ffffff;

        & > div {
          margin-left: 10px;
        }
      }
    }
  }
}
</style>
